import styles from "./index.module.scss";
import EchartsEL from "./echartsEL";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

export default function EmployeePost() {
  const optionsData = [
    {
      name: "ICT",
      icon: "circle",
      value: 94,
      than: "50%",
      textStyle: {
        color: "#22a9fe",
      },
      itemStyle: {
        color: "#22a9fe",
      },
    },

    {
      name: "网络工程师",
      icon: "circle",
      value: 47,
      than: "20%",
      textStyle: {
        color: "#2dde4b",
      },
      itemStyle: {
        color: "#2dde4b",
      },
    },
    {
      name: "IT",
      value: 31,
      icon: "circle",
      than: "20%",
      textStyle: {
        color: "#e02b41",
      },
      itemStyle: {
        color: "#e02b41",
      },
    },
    {
      name: "网规网优",
      value: 51,
      icon: "circle",
      than: "10%",
      textStyle: {
        color: "#f4cf4d",
      },
      itemStyle: {
        color: "#f4cf4d",
      },
    },
    {
      name: "管理岗位",
      value: 51,
      icon: "circle",
      than: "10%",
      textStyle: {
        color: "blue",
      },
      itemStyle: {
        color: "blue",
      },
    },
  ];
  const theme = useSelector((state) => state.theme);
  const [textColor, setTextColor] = useState(
    theme ? "rgba(37, 76, 112, 1)" : "#fff"
  );
  useEffect(() => {
    setTextColor(!theme ? "rgba(37, 76, 112, 1)" : "#fff");
  }, [theme]);
  return (
    <>
      <div className={styles.profit}>
        <div className={styles.profitRight}>
          <EchartsEL
            optionsData={optionsData}
            textColor={textColor}
          ></EchartsEL>
        </div>
      </div>
    </>
  );
}
